<template>
  <div class="edit-container">
    <el-form v-loading="formLoading" ref="detailData" :model="detailData"  label-width="140px">
      <el-form-item label="商家名称" prop="classification"  >
        <el-select v-model="detailData.businessId" filterable  placeholder="请选择商家" >
          <el-option
              v-for="item in classList"
              :key="item.id"
              :label="item.businessName"
              :value="item.id">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="商家分成(%)" prop="businessProportion" required>
        <el-input-number
            :precision="2"
            placeholder="输入非负数"
            v-model.number="detailData.businessProportion"
            class="col"
        />
      </el-form-item>
      <el-form-item label="平台分成(%)" prop="platformProportion" required >
        <el-input-number
            :precision="2"
            placeholder="输入非负数"
            v-model.number="detailData.platformProportion"
            class="col"
        />
      </el-form-item>
      <el-form-item label="兑换券有效时间" prop="voucherExpirationDay" required>
        <el-input
            type="number"
            placeholder="优惠券有效时间"
            v-model.number="detailData.voucherExpirationDay"
            class="col"
            oninput="value=value.replace(/[^0-9]/g,'')"
        />
      </el-form-item>

      <el-form-item>
        <el-button v-loading="saveLoading" element-loading-background="rgba(0, 0, 0, 0.3)" type="primary" @click="handlerSubmit" >保存</el-button>
        <el-button @click="close">取消</el-button>
      </el-form-item>
    </el-form>

  </div>
</template>
<script>


import{saveWebConsumptionDivideConfig,getWebConsumptionDivideConfigById} from "@/api/consumptionRules"
import { list} from "@/api/business";
export default {
  props:{
    id:{
      default:null
    },
    form:{
      default:null
    }
  },
  data(){
    return{
      classList:[],
      detailData:{
         id:null,
        businessProportion:0.00,
        platformProportion:0.00,
        voucherExpirationDay:1,
        businessNameStr:'',
        businessInfo:{},
        userId:null,
        businessId:null,
      },
      roles:[],
      saveLoading:false,
      formLoading:false,
    }
  },

  mounted() {
    if(this.id){
       this.getDetails()
    }
    this.getBusinessList();
  },
  methods:{
    validateProportions() {
      const total = this.detailData.businessProportion + this.detailData.platformProportion;
      if (total !== 100) {
        this.$message.warning('商家分成 + 平台分成 必须等于100');
        return false;
      }
      if(this.detailData.businessId==null ){
        this.$message.warning('请选择商家');
        return false;
      }
      return true;
    },
        getBusinessList(){
          list({page:1,limit:5000}).then(res=> {
        this.classList = res.list
      })
    },
    getDetails()
    {
      getWebConsumptionDivideConfigById({id:this.id}).then(res=>{
        this.detailData=res
      })
    },
    handlerSubmit() {
      if (this.saveLoading || this.formLoading) {
        return;
      }
      if (!this.validateProportions()) {
        return;
      }
      this.saveLoading = true;
      console.log(this.detailData);
      saveWebConsumptionDivideConfig(this.detailData).then(() => {
        this.$message.success('保存成功');
        this.close();
      }).finally(() => {
        this.saveLoading = false;
      });
    },
  close(){
      this.$emit('hideEditDialog')
    }
  }
}
</script>
<style lang="scss" scoped>
.col{
  width: 360px;
}
.img{
  width: 120px;
  height: 120px;
  margin-right: 10px;
}
.imgList{
  display: flex;
  flex-wrap: wrap;
  .img{
    width: 120px;
    height: 120px;
    margin-right: 10px;
  }
}
</style>
